<template>
  <div class="border-line card">
    <header-title title="" @fullScreen="handleFullScreen"></header-title>
    <div class="subtext">保障人员情况分析</div>
    <div class="content">
      <div class="column" style="display: flex">
        <echarts-view ref="echarts2" :options="option2" height="300px"></echarts-view>
        <echarts-view ref="echarts3" :options="option3" height="300px"></echarts-view>
        <echarts-view ref="echarts4" :options="option4" height="300px"></echarts-view>
        <echarts-view ref="echarts5" :options="option5" height="300px"></echarts-view>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import axios from 'axios'
export default {
  name: 'Right1',
  props: {
    areaID: {
      type: String,
      default: '',
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      option2: {},
      option3: {},
      option4: {},
      option5: {},
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    areaID: function () {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      const echart1 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJRY_BZRYXL',
        params: {
          Userid: 1,
          QY: this.areaID,
        },
      })
      const echart2 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJRY_BZRYHJ',
        params: {
          Userid: 1,
          QY: this.areaID,
        },
      })
      const echart3 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJRY_BZRYNLD',
        params: {
          Userid: 1,
          QY: this.areaID,
        },
      })
      const echart4 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJRY_BZRYHY',
        params: {
          Userid: 1,
          QY: this.areaID,
        },
      })
      Promise.all([echart1, echart2, echart3, echart4]).then((res) => {
        const xl = []
        const hj = []
        const nl = []
        const hy = []
        res[0].data.forEach((item) => {
          xl.push({
            name: item.name,
            value: Number(item.value),
          })
        })
        res[1].data.forEach((item) => {
          hj.push({
            name: item.name,
            value: Number(item.value),
          })
        })
        res[2].data.forEach((item) => {
          nl.push({
            name: item.name,
            value: Number(item.value),
          })
        })
        res[3].data.forEach((item) => {
          hy.push({
            name: item.name,
            value: Number(item.value),
          })
        })
        this.option2 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '学历',
              left: '69%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '学历',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['70%', '50%'],
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
                // show: false,
                // position: 'center'
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false
              // },
              data: xl,
            },
          ],
        }
        this.option3 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '户籍',
              left: '58%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '户籍',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['60%', '50%'],
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
                // show: false,
                // position: 'center'
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false
              // },
              data: hj,
            },
          ],
        }
        this.option4 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '年龄',
              left: '69%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '年龄',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['70%', '50%'],
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
                // show: false,
                // position: 'center'
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false
              // },
              data: nl,
            },
          ],
        }
        this.option5 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 20,
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '婚姻',
              left: '64%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '婚姻',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['65%', '50%'],
              label: {
                formatter: '{b} : {d}%',
                color: '#ffffff',
                // show: false,
                // position: 'center'
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}%',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false
              // },
              data: hy,
            },
          ],
        }
      })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  font-size: 18px;
  .content {
    display: flex;
    flex-direction: row;
    .column {
      flex: 1;
    }
  }
}
.subtext {
  color: #fff;
  background-color: #0d5b78;
  display: inline-block;
  width: 100%;
  font-size: 20px;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 6px 0;
}
</style>
